<template>
	<view>
		<view class="search">
			<u--input v-model="query.searchValue" placeholder="奖励人/部门" :clearable="true" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" @clear="getList()">
				<template slot="suffix">
					<view class="search_btn" @click="getList()"> 搜索</view>
				</template></u--input>
		</view>
		<view class="box " v-for=" (v,i) in datas" :key="i">
			<div class="box_herder flex">
				<div class="box_herder_left">{{v.objectType ==1?'用户' :'部门'}}</div>
				<div class="box_herder_right" :class="{
					colorRed: v.rewardType ==2
				}">
					{{v.rewardType == 1 ?'奖' :'惩'}}
				</div>
			</div>
			<div class="box_item">
				<div class="box_label">{{v.objectType ==1?'奖惩人' :' 奖惩部门'}}</div>
				<div class="box_value">{{v.objectBeingRewardedStr}}</div>
			</div>
			<div class="box_item">
				<div class="box_label">金额</div>
				<div class="box_value">{{v.rewardAmount}}</div>
			</div>

			<div class="box_item">
				<div class="box_label">经办人</div>
				<div class="box_value">{{v.createUserStr}}</div>
			</div>
			<div class="box_item">
				<div class="box_label">奖惩日期</div>
				<div class="box_value">{{v.rewardDate}}</div>
			</div>
		</view>
		<u-empty mode="list" v-if="datas.length<=0" marginTop="80">
		</u-empty>
		<div class="btnAdd" @click="btnAdd()">
			新增
		</div>
		<!-- 新增或者修改 -->
		<u-popup :show="show" mode="center" :round="10">
			<div class="block">
				<div class="block_box">
					<div class="block_item">
						<div class="block_label">
							奖惩对象
						</div>
						<div class="block_val">
							<u-radio-group v-model="form.objectType" placement="row">
								<u-radio name="1" label="用户"></u-radio>
								<div style="width: 30rpx;"></div>
								<u-radio name="2" label="部门"></u-radio>
							</u-radio-group>
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							奖惩类型
						</div>
						<div class="block_val">
							<u-radio-group v-model="form.rewardType" placement="row">
								<u-radio name="1" label="奖励"></u-radio>
								<div style="width: 30rpx;"></div>
								<u-radio name="2" label="惩罚"></u-radio>
							</u-radio-group>
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							排查任务名称
						</div>
						<div class="block_val">
							<input type="text" v-model="form.taskName" placeholder="请输入" class="input" />
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							被奖惩人或部门
						</div>
						<div class="block_val">
							<div type="text" style="min-height: 40rpx;" placeholder="请输入" class="input"
								@click="treeAdd('objectBeingRewardedStr','objectBeingRewarded')">
								{{form.objectBeingRewardedStr}}
							</div>
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							奖励金额
						</div>
						<div class="block_val">
							<input type="text" v-model="form.rewardAmount" placeholder="请输入" class="input" />
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							奖惩日期
						</div>
						<div class="block_val">
							<div type="text" style="min-height: 40rpx;" placeholder="请输入" class="input"
								@click="showDate = true">{{form.rewardDate}}</div>
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							考核部门
						</div>
						<div class="block_val">
							<div type="text" style="min-height: 40rpx;" placeholder="请输入" class="input"
								@click="treeAdd('assessmentDepartmentStr','assessmentDepartment')">
								{{form.assessmentDepartmentStr}}
							</div>
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							审批部门
						</div>
						<div class="block_val">
							<div type="text" style="min-height: 40rpx;" placeholder="请输入" class="input"
								@click="treeAdd('approvalDepartmentStr','approvalDepartment')">
								{{form.approvalDepartmentStr}}
							</div>
						</div>
					</div>

					<div class="block_item">
						<div class="block_label">
							奖惩内容
						</div>
						<div class="block_val">
							<textarea maxlength='-1' v-model="form.rewardContent" type="textarea" placeholder="请输入"
								class="textarea" />
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							奖罚依据
						</div>
						<div class="block_val">
							<textarea maxlength='-1' v-model="form.penaltySentence" type="textarea" placeholder="请输入"
								class="textarea" />
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							考核项目
						</div>
						<div class="block_val">
							<textarea maxlength='-1' v-model="form.assessmentItem" type="textarea" placeholder="请输入"
								class="textarea" />
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							主要事迹
						</div>
						<div class="block_val">
							<textarea maxlength='-1' v-model="form.mainEvent" type="textarea" placeholder="请输入"
								class="textarea" />
						</div>
					</div>

				</div>
				<view class="block_btn flex align-items">
					<view class="block_btn_left" @click="show =false">取消</view>
					<view class="block_btn_right" @click="comit">确认</view>
				</view>
			</div>
		</u-popup>
		<tree ref="tree" @comit="treeComit" :treeData="treeData" :type="4"></tree>
		<u-datetime-picker :show="showDate" v-model="date" mode="date" @cancel="showDate =false" @confirm="confirmDate">
		</u-datetime-picker>
	</view>
</template>

<script>
	import {
		punishmentrecordsAdd,
		punishmentrecordsEdit,
		punishmentrecordsGetInfo,
		punishmentrecordsList,
		punishmentrecordsRemove,
		listUser
	} from '@/api/rewardAndPunishmentRecords.js'
	import {
		getListDeptForZTree,
	} from '@/api/lssue.js'
	export default {
		data() {
			return {
				query: {
					searchValue: ''
				},
				datas: [],
				show: false,
				form: {
					objectType: '1', //奖惩对象 1:用户2：部门,
					taskName: "", //排查任务名称
					rewardType: '1', //奖惩类型
					objectBeingRewarded: '', //被奖惩人或者部门
					rewardAmount: '', //奖励金额
					rewardDate: '', //奖惩日期
					assessmentDepartment: '', //考核部门
					assessmentDepartmentStr: '',
					approvalDepartment: '', //审批部门
					approvalDepartmentStr: '',
					rewardContent: '', //奖惩内容
					penaltySentence: '', //奖罚一句
					assessmentItem: '', //考核项目
					mainEvent: '', //主要事迹,
					objectBeingRewardedStr: '',
				},
				userList: [],
				treeData: [],
				treeDataTwo: [],
				fieldName: '',
				fieldKey: '',
				showDate: false,
				date: Number(new Date())
			};
		},
		onLoad() {
			this.getList()
			this.getUserList()
			this.getDept()
		},
		methods: {
			comit() {
				if (!this.form.taskName) return uni.$u.toast('请填写排查任务名称')
				if (!this.form.objectBeingRewarded) return uni.$u.toast('请选择被奖惩人或者部门')
				if (!this.form.rewardAmount) return uni.$u.toast('请填写奖励金额')
				if (!this.form.rewardDate) return uni.$u.toast('请选择日期')
				if (!this.form.assessmentDepartment) return uni.$u.toast('请选择考核部门')
				if (!this.form.approvalDepartment) return uni.$u.toast('请选择审批部门')
				if (!this.form.rewardContent) return uni.$u.toast('请填写奖惩内容')
				if (!this.form.penaltySentence) return uni.$u.toast('请填写奖罚一句')
				if (!this.form.assessmentItem) return uni.$u.toast('请填写考核项目')
				if (!this.form.mainEvent) return uni.$u.toast('请填写主要事迹')
				if (!this.form.id) {
					punishmentrecordsAdd(this.form).then(res => {
						console.log(res, res);
						this.getList()
						this.show = false
					})
				} else {
					punishmentrecordsEdit(this.form).then(res => {
						console.log(res, res);
						this.getList()
						this.show = false
					})
				}

			},
			treeAdd(fieldName, fieldKey) {
				this.fieldName = fieldName
				this.fieldKey = fieldKey
				this.treeData = this.form.objectType == 1 && fieldName == 'objectBeingRewardedStr' ? this.userList : this
					.treeDataTwo
				this.$refs.tree.itemclickTwo(false, true, true)

			},
			btnAdd() {
				this.show = true
			},
			treeComit(e) {
				console.log(e, "v");
				this.form[this.fieldName] = e[0].label
				this.form[this.fieldKey] = e[0].id

			},
			confirmDate(time) {
				console.log(time);
				this.form.rewardDate = this.$changeDate(time.value)
				this.showDate = false
			},
			getDept() {
				getListDeptForZTree().then((res) => {
					console.log(res);
					this.treeDataTwo = res.datas.map(ele => this.treeStructure(ele));
					console.log(this.treeData, "treeData");
				});
			},
			treeStructure(ele) {
				const haveChildren = Array.isArray(ele.children) && ele.children.length > 0;
				return {
					id: ele.value,
					label: ele.label,
					checked: false,
					children: haveChildren ? ele.children.map(i => this.treeStructure(i)) : [],
				}
			},
			getUserList() {
				listUser({
					PAGE_NO: 1,
					PAGE_SIZE: 1000
				}).then(res => {
					console.log(res);
					this.userList = JSON.parse(res.datas).rows.map(v => {
						return {
							id: v.user_id,
							label: v.user_name,
							checked: false,
						}
					})
					console.log(this.userList);
				})
			},
			async getList() {
				punishmentrecordsList({
					PAGE_NO: 1,
					PAGE_SIZE: 100000,
					...this.query,
				}).then(res => {
					console.log(res, "res");
					this.datas = res.rows
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search {

		/deep/.u-input {
			width: 688rpx;
			height: 65rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			margin: 0 auto;
			margin-top: 15rpx;
			border-radius: 32rpx;
		}

		&_btn {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			padding-left: 10rpx;
			border-left: 1rpx solid #E0E0E0;
		}
	}

	.box {
		width: 730rpx;
		margin: 20rpx auto;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 30rpx;

		&_herder {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #e0e0e0;
			justify-content: space-between;
			color: #4bbccc;
		}

		&_item {
			display: flex;
			margin-top: 20rpx;

		}

		&_label {
			flex: 0 0 auto;
			color: #4bbccc;
		}
		&_value{
			margin-left: 10rpx;
		}
	}

	.colorRed {
		color: red !important;
	}

	.btnAdd {
		width: 100%;
		background-color: #267DFF;
		color: #FFFFFF;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		bottom: 0;
	}

	.block {
		width: 720rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		padding-bottom: 0;
		height: 1000rpx;
		overflow-y: scroll;

		&_box {
			padding: 30rpx 20rpx;
		}

		&_item {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

		}

		&_label {
			font-size: 29rpx;
			margin-right: 20rpx;
			width: 124rpx;
		}

		&_val {
			flex: 0.95;
		}

		.input {
			width: 100%;
			border: 1rpx solid #dadbde;
			padding: 6rpx 10rpx;
			border-radius: 4rpx;
		}

		.textarea {
			width: 100%;
			border: 1rpx solid #dadbde;
			border-radius: 4rpx;
			padding: 6rpx 10rpx;
		}

		&_btn {
			border-top: 1rpx solid #E6E6E6;
			height: 88rpx;
			margin-top: 30rpx;

			&_left {
				flex: 1;
				text-align: center;
				line-height: 88rpx;
				border-right: 1rpx solid #E0E0E0;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				flex: 1;
				text-align: center;
				line-height: 88rpx;


				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #3388FF;
			}
		}
	}
</style>